<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rating demo</title>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
<link rel="stylesheet" href="../style/avalon.doc.css"/>
</head>
<body>
    <div class="wrapper">
        <h1>rating demo</h1>
        <div class="demo-show" ms-controller="demo">
            <fieldset>
                <legend>默认设置</legend>
                <div ms-widget="rating"/></div>
            </fieldset>
            <fieldset>
                <legend>和双绑input结合</legend>
                <input type="text" ms-duplex="ratingValue_1" ms-widget="rating"/>
            </fieldset>
            <fieldset>
                <legend>设置最大星标数</legend>
                <div ms-widget="rating, $, $rating_2"></div>
            </fieldset>
            <fieldset>
                <legend>设置星标大小</legend>
                <div ms-widget="rating, $, $rating_3"></div>
            </fieldset>
            <fieldset>
                <legend>设置默认星值</legend>
                <div ms-widget="rating, $, $rating_4"></div>
            </fieldset>
            <fieldset>
                <legend>设置图标和颜色</legend>
                <div ms-widget="rating, $, $rating_5"></div>
            </fieldset>
            <script>
                require(["rating/avalon.rating"], function(avalon) {
                    var model = avalon.define("demo", function(vm) {

                        vm.ratingValue_1 = 1;

                        vm.$rating_2 = {
                            max: 10
                        };

                        vm.$rating_3 = {
                            size: 40
                        };

                        vm.$rating_4 = {
                            defaultValue: 1
                        };

                        vm.$rating_5 = {
                            selectedContent: '&#xf040;',
                            selectedColor: 'red',
                            notSelectedContent: '&#xf040;'
                        };

                        vm.onSelect = function() {
                            console.log('select', arguments);
                        };

                        vm.onFloat = function() {
                            console.log('float', arguments);
                        };

                    });
                    avalon.scan();
                });
            </script>
        </div>
        <div ms-skip>
            <pre class="brush: js; html-script: true; gutter: false; toolbar: false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;colorpicker demo&lt;/title&gt;
&lt;script src="../avalon.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="../style/avalon.doc.css"/&gt;
&lt;/head&gt;
&lt;body class="ms-controller"&gt;
    &lt;div class="wrapper"&gt;
        &lt;h1&gt;rating demo&lt;/h1&gt;
        &lt;div class="demo-show" ms-controller="demo"&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;默认设置&lt;/legend&gt;
                &lt;div ms-widget="rating"/&gt;&lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;和双绑input结合&lt;/legend&gt;
                &lt;input type="text" ms-duplex="ratingValue_1" ms-widget="rating"/&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;设置最大星标数&lt;/legend&gt;
                &lt;div ms-widget="rating, $, $rating_2"&gt;&lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;设置星标大小&lt;/legend&gt;
                &lt;div ms-widget="rating, $, $rating_3"&gt;&lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;设置默认星值&lt;/legend&gt;
                &lt;div ms-widget="rating, $, $rating_4"&gt;&lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;设置图标和颜色&lt;/legend&gt;
                &lt;div ms-widget="rating, $, $rating_5"&gt;&lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;script&gt;
                require(["rating/avalon.rating"], function(avalon) {
                    var model = avalon.define("demo", function(vm) {

                        vm.ratingValue_1 = 1;

                        vm.$rating_2 = {
                            max: 10
                        };

                        vm.$rating_3 = {
                            size: 40
                        };

                        vm.$rating_4 = {
                            defaultValue: 1
                        };

                        vm.$rating_5 = {
                            selectedContent: '&amp;#xf040;',
                            selectedColor: 'red',
                            notSelectedContent: '&amp;#xf040;'
                        };

                        vm.onSelect = function() {
                            console.log('select', arguments);
                        };

                        vm.onFloat = function() {
                            console.log('float', arguments);
                        };

                    });
                    avalon.scan();
                });
            &lt;/script&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
            </pre>
        </div>
    </div>
</body>
